<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2020/12/18
  Time: 20:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf8">
    <title></title>
    <style>

        .mynav>ul{
            list-style-type:none;
            padding:0;

        }
        .mynav>ul>li{
            float:left;
            margin:10px 20px ;
            color:white;

        }
        .mynav>ul>li>a{
            text-decoration:none;
            color:white;
        }
        .dropdown-m{
            position:absolute;
            z-index:99;
            list-style:none;
            margin-top:10px;
            padding:10px;
            font-size:20px;
            border:0px solid black;
            float: none;
            display:none;
            box-shadow: 10px 10px 5px #888888;
            background:#666666;


        }

        .dropdown-m a{
            text-decoration:none;
            color:white;
            padding:10px;
            width:100px;
            display: block;
        }
        .dropdown-m li:hover{
            background:#CCEEFF;


        }
        .cj{
            position:absolute;
            z-index:99;
            list-style:none;
            margin-top:10px;
            padding:10px;
            font-size:20px;
            border:0px solid black;
            float: none;
            display:none;
            box-shadow: 10px 10px 5px #888888;
            background:#666666;


        }
        .cj a{
            text-decoration:none;
            color:white;
            padding:10px;
            width:100px;
            display: block;
        }
        .xg{
            position:absolute;
            z-index:99;
            list-style:none;
            margin-top:10px;
            padding:10px;
            font-size:20px;
            border:0px solid black;
            float: none;
            display:none;
            box-shadow: 10px 10px 5px #888888;
            background:#666666;


        }
        .xg a{
            text-decoration:none;
            color:white;
            padding:10px;
            width:100px;
            display: block;
        }
        .sc{
            position:absolute;
            z-index:99;
            list-style:none;
            margin-top:10px;
            padding:10px;
            font-size:20px;
            border:0px solid black;
            float: none;
            display:none;
            box-shadow: 10px 10px 5px #888888;
            background:#666666;


        }
        .sc a{
            text-decoration:none;
            color:white;
            padding:10px;
            width:100px;
            display: block;
        }
        .content{
            margin:40px;
        }
        button{
            cursor: pointer;

            border: none;
            outline: none;
            color: white;

            background-color: inherit;
        }
        .show{
            display:block;
        }
    </style>
</head>
<body>
<div class="container" style="background:lightgrey;height:800px">
    <nav class="mynav" style="background:black;">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">订单</a></li>
            <li>
                <button onclick="showtoggle()">个人中心</button>
                <ul class="dropdown-m" id="dropdown">
                    <li><a href="#">个人信息</a><li>
                    <li><a href="#">个人账户</a><li>
                    <li><a href="#">邮箱</a><li>
                </ul>
            </li>
            <li>你好，用户：${cs.name}</li>
        </ul>
        <div  style="clear:both"></div>

    </nav>

    <div class="content">
        <nav class="mynav" style="background:black;">
            <ul>
                <li><button onclick="on1()">创建订单信息</button>
                    <ul class="cj" id="cj1">
                        <li><a href="#">房间型号:<input type="text" name=""></a></li>
                        <li><a href="#">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:<input type="text" name=""></a></li>
                        <li><a href="#">手机号码:<input type="text" name=""></a></li>
                        <li><a href="#">身份证号:<input type="text" name=""></a></li>
                        <li><button onclick="sql1()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;创建</button></li>
                    </ul>
                </li>

            </ul>
        </nav>
    </div>
    <div class="content">
        <nav class="mynav" style="background:black;">
            <ul>
                <li><button onclick="on2()">修改订单信息</button>
                    <ul class="xg" id="xg1">
                        <li><a href="#">房间型号:<input type="text" name=""></a></li>
                        <li><a href="#">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:<input type="text" name=""></a></li>
                        <li><a href="#">手机号码:<input type="text" name=""></a></li>
                        <li><a href="#">身份证号:<input type="text" name=""></a></li>
                        <li><button onclick="sql2()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;修改</button></li>
                    </ul>
                </li>

            </ul>
        </nav>
    </div>

    <div class="content">
        <nav class="mynav" style="background:black;">
            <ul>
                <li><button onclick="on3()">删除订单信息</button>
                    <ul class="sc" id="sc1">
                        <li><a href="#">房间型号:<input type="text" name=""></a></li>
                        <li><a href="#">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:<input type="text" name=""></a></li>
                        <li><a href="#">手机号码:<input type="text" name=""></a></li>
                        <li><a href="#">身份证号:<input type="text" name=""></a></li>
                        <li><button onclick="sql3()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;删除</button></li>
                    </ul>
                </li>

            </ul>
        </nav>
    </div>
</div>
<script>
    //实现切换，hover也是可以，不用这么麻烦
    function showtoggle(){
        document.getElementById("dropdown").classList.toggle("show");
    }
    //点击其他区域也关闭
    window.onclick=funtuion=function(e){
        if(!e.target.matches("button")){
            var dropdown = document.getElementById("dropdown");
            if (dropdown.classList.contains('show')) {
                dropdown.classList.remove('show');
            }}
    }
    function on1(){
        document.getElementById("cj1").classList.toggle("show");

    }
    function on2(){
        document.getElementById("xg1").classList.toggle("show");

    }
    function on3(){
        document.getElementById("sc1").classList.toggle("show");

    }
    function sql1(){
        window.location.href="xx";

    }
    function sql2(){
        window.location.href="xx";

    }
    function sql3(){
        window.location.href="xx";

    }
</script>
</body>
</html>
